<template>
	<view class="content">
		<view v-for="item in tableData" :key="item.id">
			<uni-card
				:thumbnail="users.find(v => v.id===item.counselorId)?users.find(v => v.id===item.counselorId).portrait:require('@/static/defaultPortrait.png')"
				:title="users.find(v => v.id===item.counselorId)?users.find(v => v.id===item.counselorId).nickName:''"
				:extra="item.room">
				<view v-if="item.state=='进行中'">今日还剩名额：{{item.surplus}}</view>
				<view v-if="item.state!='进行中'">状态：{{item.state}}</view>
				<view>咨询时间：{{item.time}}&nbsp;&nbsp;{{item.exactTime}}</view>
				<view>
					<!-- <button type="primary" style="margin-top: 10rpx;" @click="sign(item.id)" >预约</button> -->
					<button v-if="item.surplus!=0&&item.state=='进行中'" type="primary" style="margin-top: 10rpx;"
						@click="dialogToggle(item.surplus,item.id,item.counselorId,users.find(v => v.id===item.counselorId)?users.find(v => v.id===item.counselorId).nickName:'')">预约</button>
				</view>
			</uni-card>
		</view>
		<view v-if="tableData.length === 0"
			style="text-align: center; font-size: 48rpx; height: 100vh; line-height: 100vh; color:rgb(127,127,126) ;">
			最近没有心理咨询哦！
		</view>

		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="info" cancelText="取消" confirmText="确定" title="再次确认"
					:content="`你将预约${counselorName}老师的心理咨询!`" @confirm="dialogConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				user: {},
				surplus: '',
				state: '',
				counselorName: '',
				appointmentid: null,
				counselorid: null,
				users: [],

			}
		},
		onLoad() {
			this.user = uni.getStorageSync('user');
			this.request({
				url: '/user'
			}).then(res => {
				this.users = res.data;

			});
			this.loading();
		},
		onPullDownRefresh() {
			this.request({
				url: '/appointment/page/front',

			}).then(res => {
				if (res.code === '0') {
					setTimeout(function() {
						uni.stopPullDownRefresh();
						setTimeout(function() {
							uni.showToast({
								title: '加载成功'
							})
						}, 200);
					}, 800);
				}
				this.tableData = res.data;
			})
		},
		methods: {
			loading() {
				this.request({
					url: '/appointment/page/front',

				}).then(res => {
					this.tableData = res.data;
					console.log(this.tableData)
				})
			},
			dialogToggle(surplus, appointmentId,counselorid,counselorName) {
				this.surplus = surplus;
				this.appointmentId = appointmentId;
				this.counselorid=counselorid;
				this.counselorName = counselorName;
				this.$refs.alertDialog.open();
			},
			dialogConfirm() {
				this.request({
					url: '/appointmentSign',
					method: 'POST',
					data: {
						userId: this.user.id,
						appointmentId: this.appointmentId,
						counselorId:this.counselorid,
					}
				}).then(res => {
					if (res.code === '0') {
						uni.showToast({
							title: '报名成功'
						})
					}
					this.loading();
				});
			},
			// dialogClose() {
			// 	console.log('点击关闭')
			// },
			// sign(appointmentId) {
			// 	this.request({
			// 		url: '/appointmentSign',
			// 		method: 'POST',
			// 		data: {
			// 			userId: this.user.id,
			// 			appointmentId: appointmentId
			// 		}
			// 	}).then(res => {
			// 		if (res.code === '0') {
			// 			uni.showToast({
			// 				title: '报名成功'
			// 			})
			// 		}
			// 	})
			// },

		}
	}
</script>

<style>
	.content {
		/* display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: aqua; */
	}
</style>
